<template>
  <div
    class="topoCard"
    :style="{ width: comp.width + 'px', height: comp.height + 'px' }"
  >
    <div class="card_content">
      <div style="font-size: 1.25em; text-shadow: 1px 2px 0.5px #000">
        <span style="font-weight: bold">{{ label }}: </span>
        <span style="color: #efdb64">{{ value }}</span>
        <!-- <span v-if="comp.text == '产品数量'" style="color: #f8a75c">{{
          value
        }}</span>
        <span v-else-if="comp.text == '设备数量'" style="color: #efdb64">{{
          _dev_count
        }}</span>
        <span v-else-if="comp.text == '在线设备'" style="color: #03fcfa">{{
          _dev_online_count
        }}</span>
        <span v-else-if="comp.text == '离线设备'" style="color: #ff684b">{{
          _dev_off_count
        }}</span> -->
        <!-- {{value}} -->
      </div>
    </div>
    <!-- <img
      src="@/assets/static/card.png"
      :style="{ width: comp.width + 'px', height: comp.height + 'px' }"
    /> -->
  </div>
</template>

<script>
import { Base64 } from 'js-base64'
import { mapGetters, mapMutations } from 'vuex'
import { getToken } from '@/utils/auth'

export default {
  name: 'TopoCard',
  props: {
    comp: {
      type: Object,
      default: () => ({
        type: 'line',
        width: 262,
        hieght: 72
      })
    }
  },
  computed: {
    ...mapGetters([
      '_product_count',
      '_dev_count',
      '_dev_online_count',
      '_dev_off_count'
    ])
  },
  data() {
    return {
      value: 0,
      topic: '',
      label: ''
    }
  },
  created() {
  },
  mounted() {
    this.label = this.comp.text
    // $dg/user/konva
    this.topic = `/${this.comp.type}/${this.comp.id}/report`
    // console.log(this.topic);
    //  this.$dgiotBus.$off(this.topic);
    this.$dgiotBus.$off(this.topic)
    this.$dgiotBus.$on(this.topic, (e) => {
      // console.log("11111");
      const str = String.fromCharCode.apply(null, new Uint8Array(e))

      const receive = JSON.parse(Base64.decode(str))
      console.log(this.comp.type, '接收到了数据=>', receive)
      const sessionToken = getToken()
      const pubTopic = `$dg/user/dashboard/${sessionToken}/ack` // 返回
      const message = {
        ack: 'heartbeat'
      }
      this.$dgiotBus.$emit(`MqttPublish`, {
        pubTopic,
        message: JSON.stringify(message),
        qs: 0,
        status: false
      })
      // this.value = e;
      // this.receive.lable = receive.lable;
      this.text = receive.lable
      this.value = receive.value
    })
  },
  destroyed() {
    this.$dgiotBus.$off(this.topic)
  }
}
</script>
<style lang="scss" scoped>
.topoCard {
  position: relative;

.card_content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

}
</style>
